<!-- 登录注册页 -->
<template>
    <div class="layout">
      <el-tabs type="border-card" @tab-change="getVerifyPicture()">
        <el-tab-pane label="登录">
          <el-form label-position="right" label-width="100px" class="loginForm" :rules="loginRules" :model="loginForm" ref="form1" @keyup.enter="handleLogin">
            <el-form-item label="用户名：" prop="username">
              <el-input v-model="loginForm.username" />
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input type="password" v-model="loginForm.password" />
            </el-form-item>
            <el-form-item label="验证码：" prop="identifyCode">
              <el-row>
                <el-input v-model="loginForm.identifyCode" class="inpWidth"/>
                <img class="verifyCode" :src="verify" alt="验证码图片获取失败" @click="getVerifyPicture" />
              </el-row>
            </el-form-item>
            <el-button type="primary" class="loginBtn" @click="handleLogin" >
              登录
            </el-button>
          </el-form>
        </el-tab-pane>
  
        <el-tab-pane label="注册">
          <el-form label-position="right" label-width="100px" class="loginForm" :rules="registerRules" :model="registerForm" ref="form2" @keyup.enter="register">
            <el-form-item label="昵称：" prop="rName">
              <el-input v-model="registerForm.rName"/>
            </el-form-item>
            <el-form-item label="用户名：" prop="rUserName">
              <el-input v-model="registerForm.rUserName"/>
            </el-form-item>
            <el-form-item label="密码：" prop="rPassword">
              <el-input type="password" v-model="registerForm.rPassword" />
            </el-form-item>
            <el-form-item label="确认密码：" prop="confirmPassword">
              <el-input type="password" v-model="registerForm.confirmPassword" @blur="confirmFunc"/>
            </el-form-item>
            <el-form-item label="验证码：" prop="identifyCode">
              <el-row>
                <el-input v-model="registerForm.identifyCode" class="inpWidth"/>
                <img class="verifyCode" :src="verify" alt="验证码图片获取失败" @click="getVerifyPicture" />
              </el-row>
            </el-form-item>
            <el-button type="primary" class="loginBtn" @click="register" >
              注册
            </el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
<script setup>
import { onMounted,getCurrentInstance } from 'vue';
import { reactive, ref } from "@vue/reactivity";
import { verifyPicture, login } from "@/api/login";
import { getInfo, addUser } from "@/api/user";

//验证码图片url
const verify = ref('');
//验证码值
const verifyValue = ref('');

const loginForm = reactive({
    username: "",
    password: "",
    identifyCode: "",
});
const registerForm = reactive({
    rName: "",
    rUserName: "",
    rPassword: "",
    confirmPassword: "",
    identifyCode: "",
});

const _this = getCurrentInstance().appContext.config.globalProperties;
const form1 = ref(null);
const form2 = ref(null);

// 登录
const handleLogin = () =>{
  form1.value.validate((valid) => {
    if(valid) {
      login(loginForm)
      .then(() => {
        getInfo(loginForm.username).then(()=>{
          form1.value.resetFields();
          _this.$router.push('/plan');
        })
      })
      .catch((err) => {
        getVerifyPicture();
      });
    }
  })
}
// 注册
const register = () =>{
  let data = {
    name: registerForm.rName,
    username: registerForm.rUserName,
    password: registerForm.rPassword,
  }
  form2.value.validate((valid) => {
    if(valid){
      addUser(data)
      .then(() => {
        form2.value.resetFields();
        console.log('注册成功！');
      })
      .catch((err) => {
        getVerifyPicture();
      });
    }
  })
}

//验证码校验
const verifyCode = (rule,value,callback) => {
  value.toUpperCase() !== verifyValue.value.toUpperCase() ? callback(new Error("验证码不正确")) : callback();
};

//确认密码校验
const confirmPassword = (rule,value,callback) => {
    value !== registerForm.rPassword ? callback(new Error("两次密码输入不一致")) : callback();
};

//必填项规则
const loginRules = {
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  identifyCode: [{ required: true, message: "验证码不能为空", trigger: "blur" },
                 {trigger: "blur", validator: verifyCode }],
};

const registerRules = {
  rName: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
  rUserName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  rPassword: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" },
                    { trigger: "blur", validator: confirmPassword }],
  identifyCode: [{ required: true, message: "验证码不能为空", trigger: "blur" },
                 {trigger: "blur", validator: verifyCode }],
};

const getVerifyPicture = () => {
  verifyPicture().then((res) => {
    verify.value = window.URL.createObjectURL(res.data);
    verifyValue.value = res.headers.codetext;
  })
}

onMounted(() => {
  getVerifyPicture();
})
</script>
  
<style scoped>
.verifyCode {
    padding-left: 20px;
}

:deep(.el-form-item__label) {
    height: 50px;
    line-height: 50px;
}
.layout {
    position: absolute;
    left: calc(50% - 210px);
    top: 20%;
    width: 420px;
}
.loginBtn {
    width: 100px;
}
.loginForm {
    text-align: center;
    max-width: 460px;
}
.checkBox {
    margin-left: 7px;
}
.inpWidth {
    width: 165px;
}
</style>
  